<template>
	<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view class="container">
		<view class="bg-white">
			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
		</view>
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
			<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;">
				<list-cell :hover="false">
					<view class="w-100 d-flex align-items-center">
						<view class="flex-fill d-flex flex-column">
							<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
								{{ item.messageInfo.title }}
							</view>
							<!-- view class="font-size-sm text-color-assist">消息名称：{{ item.messageInfo.title }}</view>
							<view class="font-size-sm text-color-assist">消息编号：{{ item.orderId }}</view> -->
							<!-- // <view class="font-size-sm text-color-assist">消息时间：{{ item.messageInfo.createdTime}}
							// </view> -->

							<view class="content" v-html="item.messageInfo.content"></view>
						</view>
						<!-- <view class="font-size-lg text-color-primary">
							{{ item.statusDto.title }}
						</view> -->
					</view>
				</list-cell>
				<list-cell :hover="false" last>
					<!-- <view class="w-100 d-flex flex-column">
						<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
			
						</view>
						<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
					
							<view class="d-flex font-size-sm text-color-base align-items-center">
				
							</view>
						</view>
						<view class="d-flex align-items-center justify-content-end">
				
						</view>
					</view> -->
				</list-cell>
			</view>
		</view>
		<uv-empty v-if="orders.length == 0" mode="list"></uv-empty>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		formatDateTime,
		kmUnit
	} from '@/utils/util'
	import {reqMyNotice} from "@/api/system.js"
	const main = useMainStore()
	const {
		isLogin
	} = storeToRefs(main)
	const title = ref('我的消息')

	const page = ref(1)
	const pageSize = ref(10)
	const orders = ref([])
	const listTotal = ref(null) //页面总数量
	const tabList = ref([{
		type: -1,
		name: '全部',
	}, {
		type: 0,
		name: '未读',
	}, {
		type: 1,
		name: '已读'
	}, ])
	const current = ref(0)
	const type = ref(-1)

	const queryParams = reactive({
		'isPagination': true,
		'orderBy': 'created_time desc',
		'pageNum': 1,
		'pageSize': 10,
		'queryObj': {
			'state': ''
		}
	})
	const goodsNum = computed(() => { //计算单个饮品添加到购物车的数量
		return (goods) => {
			let num = 0;
			goods.forEach(good => num += parseInt(good.number))
			return num;
		}
	})
	onLoad(() => {
		// if(!isLogin.value) {
		// 	uni.navigateTo({url: '/pages/components/pages/login/login'})
		// }
		getOrders(false)
	})
	onPullDownRefresh(() => {
		getOrders(false)
	})
	onReachBottom(() => {
		if(orders.value.length >= listTotal.value){
			return;
		}
		getOrders(false)
	})

	// tab栏切换
	const change = (e) => {
		//console.log('e;',e.type)
		//console.log('e.index;',e.index)
		type.value = e.type
		queryParams.queryObj.state = e.type
		getOrders(true)
	}

	const getOrders = async (isRefresh = false) => {
		uni.showLoading({
			title: '加载中'
		})
		if (isRefresh) {
			orders.value = []
			queryParams.pageNum = 1
		}
		let ordersData = await reqMyNotice(queryParams);
		listTotal.value = ordersData.data.data.size
		if (ordersData.data.data.list && ordersData.data.data.list.length > 0) {
			orders.value = orders.value.concat(ordersData.data.data.list)
			queryParams.pageNum += 1
		}
		uni.stopPullDownRefresh();
		uni.hideLoading()
	}
	const detail = (id) => {
		uni.navigateTo({
			url: '/pages/components/pages/orders/detail?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	.left-margin {
		margin-left: 10rpx;
	}

	.image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 30rpx;
		border-radius: 8rpx;
	}

	.orders-list {
		.font-size-lg {
			font-weight: 600;
		}

		.content {
			margin-left: -43px;
		}
	}
</style>